/** @jsxImportSource @emotion/react */
import * as React from "react";
import {css} from "@emotion/react";
import {
  CCell, Cell, Table, TableBody, TableRow, Text, TableHead, TextArea, BlobInputList,
} from "customize-easy-ui-component";
import {InspectRecordLayout, InternalItemProps, RepLink, useItemInputControl} from "../../common/base";
import {TailMenRowIspCheck} from "../../contain/rarelyVary";
import {useMeasureInpFilter} from "../../common/hooks";
import {objNestSet} from "../../../common/tool";
import {useOmnipotentPrefCs, useOmnipotentPrefTitle} from "../../hook/useOmnipotentPref";
import {tail附页} from "./orcBase";

//配置模式不同于 ['安制度', {t: '安全管理制度', pr: '安全管理', span: 5, },],
export const items检验项 = [
    ['安制度', [{t:'安全管理',s:5},], '安全管理制度', ],
    ['设计资', [{},], '设计、制造、安装、改造、维修等资料', ],
    ['登记证', [{},], '《使用登记表》、《使用登记证》', ],
    ['保养录', [{},], '日常维护保养、运行、定期安全检查记录', ],
    ['问题处', [{},], '年度检查、定期检验报告及问题处理情况', ],
    ['仪表校', [{t:'安全管理',s:4},], '安全附件及仪表校验（检定）、修理和更换记录', ],
    ['应急案', [{}], '压力容器应急专项预案', ],
    ['急演练', [{}], '压力容器事故应急专项演练记录', ],
    ['故障录', [{}], '压力容器事故、故障情况记录', ],
    ['铭牌', [{t:'容器本体及运行情况',s:6}], '铭牌、漆色、特种设备使用标志', ],
    ['接头陷', [{}], '本体、接口（阀门、管路)部位、焊接（粘接）接头缺陷情况检查', ],
    ['外面腐', [{}], '外表面腐蚀、结霜、结露情况检查', ],
    ['隔热', [{}], '隔热层检査', ],
    ['信号孔', [{}], '检漏孔、信号孔检查', ],
    ['异常振', [{}], '压力容器与相邻管道或者构件异常振动、响声或者相互摩擦情况检查', ],
    //1-15， 29拆分
    ['支承座', [{t:'容器本体及运行情况',s:6}], '支承或者支座、基础、紧固螺栓检查', ],
    ['排污装', [{}], '排放（疏水、排污)装置检查', ],
    ['超压超', [{}], '运行期间超压、超温、超量等情况检查', ],
    ['接地', [{}], '接地装置检查', ],
    ['监控实', [{}], '监控措施是否有效实施情况检查', ],
    ['员持证', [{}], '快开门式压力容器作业人员持证情况', ],
    ['安全阀', [{t:'安全附件及仪表',s:8}], '安全阀', ],
    ['爆破片', [{}], '爆破片装置', ],
    ['联锁装', [{}], '安全联锁装置', ],
    ['压力表', [{}], '压力表', ],
    ['液位计', [{}], '液位计', ],
    ['测温仪', [{}], '测温仪表', ],
    ['导静电', [{}], '导静电装置', ],
    ['急切断', [{}], '紧急切断装置', ],
    //非金属压力容器专项要求
    ['非它1', [], ' ', ],
    ['非它2', [], ' ', ],
    ['非它3', [], ' ', ],
    ['非它4', [], ' ', ],
    ['非它5', [], ' ', ],
    ['非它6', [], ' ', ],
    ['非它7', [], ' ', ],
    ['非它8', [], ' ', ],
];
interface Props extends InternalItemProps {
    part?: number;
}
export const itemA检验项: string[] = ['附页说明',  ];
items检验项.forEach(([name, title, initIsp], i: number) => {
  itemA检验项.push(name as string);
});
const 检查结果选=['√','无此项', '×', '—'];
const step验项=[items检验项.slice(0,15), items检验项.slice(15,29), items检验项.slice(29)];
const base验项=[0,15,29];
export const AppendixPage =
    React.forwardRef((
        {children, show, alone = true, refWidth, label,part=1 }: Props, ref
    ) => {
      const {inp, setInp} = useItemInputControl({ref});
      const [getInpFilter] = useMeasureInpFilter(null, itemA检验项,);
      const titNode=useOmnipotentPrefTitle({config: step验项[part-1], baseSeq:base验项[part-1] });
      let iaddc=0;
      return (
          <InspectRecordLayout inp={inp} setInp={setInp} getInpFilter={getInpFilter} show={show}
                               alone={alone} label={label!}>
            <Text variant="h5">{label}：</Text>
            {step验项[part-1]?.map(([name, _1, item, unit]: any, i: number) => {
              let adName='';
              if(' '===item){
                  iaddc++;
                  adName='非它'+iaddc;
              }
              return (<React.Fragment key={i}>
                <div css={{display: 'flex', flexWrap: 'wrap', alignItems: 'center'}}>
                  {titNode[i]}{' '===item && inp?.[adName]?.t}&nbsp;
                  { ' '===item && <> 项目：
                           <BlobInputList value={inp?.[adName]?.t ||''} style={{display: 'inline-flex', width: '15rem'}}  rows={2}
                                       onListChange={v => objNestSet(adName,'t',v||undefined, inp, setInp) }/>
                    </>
                  }
                  <div css={{display: 'inline-flex', alignItems: 'center', flexWrap: 'wrap'}}>
                    检查结果：
                    <BlobInputList value={inp?.[name]?.r || ''} datalist={检查结果选} rows={1}
                                   style={{display: 'inline-flex', width: '9rem', maxWidth: '100%', fontSize: '1rem',}}
                                   listStyle={css({fontSize: '1rem',})}
                                   onListChange={v => objNestSet(name, 'r', v || undefined, inp, setInp)}/>
                  </div>
                  <div css={{display: 'inline-flex', alignItems: 'center', flexWrap: 'wrap'}}>
                    备注：
                    <BlobInputList value={inp?.[name]?.m || ''}  rows={2}
                                   style={{display: 'inline-flex', width: '16rem', maxWidth: '100%',}}
                                   onListChange={v => objNestSet(name, 'm', v || undefined, inp, setInp)}/>
                  </div>
                </div>
              </React.Fragment>);
            })}
            <hr/>
             备注：
            <TextArea  value={inp?.附页说明 ||''} rows={6}
                       onChange={e => setInp({ ...inp, 附页说明: e.currentTarget.value||undefined}) } />
            {children}
          </InspectRecordLayout>
      );
  });

const tailRender = (orc: any, name: string, lix: number, unit: any) => {
  const nneedbig = orc?.[name]?.r?.length >= 3 || (!orc?.[name]?.r);
  return <>
    <CCell><Text css={{fontSize: nneedbig ? '0.875rem' : '1.15rem'}}>{orc?.[name]?.r ?? '／'}</Text></CCell>
    <CCell>{orc?.[name]?.m ?? '／'}</CCell>
  </>;
}

//其它1 可定做项 @代码耦合@！ 固定项个数=29;  可加个数=8项；
export const AppendixPageVw = ({orc, rep,op}: { orc: any, rep: any,op?:boolean }
) => {
  const configNew =React.useMemo(()=>{
        const mainp=items检验项.slice(0,29);
        let arr= [] as string[];
        for(let i = 0; i < 8; i++) {
          const name='非它'+(i+1);
          if(orc?.[name]?.t)   arr.push(name);
        }
        const rspanA=arr.length;
        let add=[];
        for(let k = 0; k < rspanA; k++) {
          const name=arr[k];
          const tlarr=0===k?  [{t:'非金属压力容器专项要求',s: rspanA }] :[{}];
          add.push( [name, tlarr, orc?.[name]?.t ] );
        }
        if(0===add.length)  add=[ ['非它1', [{t:'非金属压力容器专项要求',s: 1 }] , '／',] ];
        return [...mainp, ...add ];
  },[orc?.非它1, orc?.非它2, orc?.非它3, orc?.非它4,orc?.非它5, orc?.非它6, orc?.非它7, orc?.非它8]);

  const [renderP1,renderP2,renderP3] = useOmnipotentPrefCs({orc, config: configNew,
                      split:[14,28],tag:'ApxIspItms', tailRender, pcols: 1, noNo: false, unitCel: false});
  return <>
    <div css={{"@media print": {paddingBottom: '5.5rem', pageBreakInside: 'avoid'}}}>
      <Text id='AppendixPage' variant="h2" css={{textAlign: 'center', marginTop: '1rem',
      }}>压力容器年度检查{op?'记录':'报告'}附页</Text>
      <div css={{display: 'flex', justifyContent: 'space-between'}}>
          <Text>单位内编号：{orc.单位内部编号}</Text>
        <Text>{op?'记录':'报告'}编号：{rep.isp.no}</Text>
      </div>
    </div>
    <Table fixed={ ["3.6%", "8.5%", "%", "12%","30%"] }
              css={{borderCollapse: 'collapse', "@media print": {marginTop: '-5.5rem'}}} tight miniw={800}>
      <TableHead>
        <TableRow>
          <CCell><Text css={{fontSize: '0.75rem'}}>序号</Text></CCell><CCell colSpan={2}>检查项目</CCell><CCell>检查结果</CCell><CCell>备注</CCell>
        </TableRow>
      </TableHead>
      <TableBody>
        <RepLink rep={rep} tag={'AppendixPage'}>
            {renderP1}
        </RepLink>
        <RepLink rep={rep} tag={'ApxIspItms_15'}>
            {renderP2}
        </RepLink>
        <RepLink rep={rep} tag={'ApxIspItms_29'}>
            {renderP3}
          <TableRow>
            <Cell split={true} colSpan={5}>
              <div css={{minHeight: '2rem', whiteSpace: 'pre-wrap'}}>
                备注：<br/>{orc?.附页说明 || '／'}
              </div>
            </Cell>
          </TableRow>
        </RepLink>
      </TableBody>
    </Table>
    <TailMenRowIspCheck  orc={orc} rep={rep} cap='检查' href={`/report/${rep?.modeltype}/ver/${rep?.modelversion}/${rep?.id}/ProjectList#ProjectList`}>
    </TailMenRowIspCheck>
    {tail附页}
  </>;
};
